<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>vue3响应式原理 proxy</title>
  </head>
  <body>
    <script>
      // 目标对象。
      let user = {
        name: "张某某",
        age: 23,
        wife: {
          name: "李某",
          age: 24,
        },
      };
      //把目标对象变成代理对象，
      //参数一：需要代理的目标对象 target
      //参数二： 处理器对象，对目标对象的数据进行监视，以及操作目标对象的数据 handler
      let proxyUser = new Proxy(user, {
        //   获取目标对象属性值
        get(target, prop) {
          console.log("get方法被调用了");
          // 将结果反射回去
          return Reflect.get(target, prop);
        },
        // 修改或新增目标对象的属性
        set(target, prop, newValue) {
          console.log("set方法被调用了");
          // 将修改后的新值，反射回目标对象
          return Reflect.set(target, prop, newValue);
        },
        deleteProperty(target, prop) {
          console.log("删除方法被调用了");
          return Reflect.deleteProperty(target, prop);
        },
      });

      // 通过代理对象就可以获取目标对象上的值
      console.log(proxyUser.name);
      // 通过代理对象，更新目标对象上的属性值
      proxyUser.name = "hhhh";
      console.log(user.name);
      //通过代理对象，删除目标对象上的属性
      delete proxyUser.name;
      console.log(user);
    </script>
  </body>
</html>
